<!doctype html>
<!--
  Subscription Sample App
  Copyright 2018 Google LLC. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Classy Taxi - Sample App to demonstrate Google Play Billing Subscription.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <title>Classy Taxi</title>

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="images/android-home.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Classy Taxi">
    <link rel="apple-touch-icon-precomposed" href="images/ios-home.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
    <meta name="msapplication-TileColor" content="#3372DF">

    <link rel="shortcut icon" href="images/favicon.png">


    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.blue-red.min.css" />
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.css" />

    <script src="/__/firebase/4.12.1/firebase-app.js"></script>
    <script src="/__/firebase/4.12.1/firebase-auth.js"></script>
    <script src="/__/firebase/4.12.1/firebase-functions.js"></script>
    <script src="/__/firebase/init.js"></script>
    <script src="https://cdn.firebase.com/libs/firebaseui/2.7.0/firebaseui.js"></script>

    <script defer src="scripts.js"></script>
    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>    

  </head>
  <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <!-- Page header -->
      <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
        <div class="mdl-layout__header-row">
          <h3>Classy Taxi</h3>
          <div class="mdl-layout-spacer"></div>
          <button id="sign-out-button" class="mdl-button mdl-js-button mdl-color-text--white content-ui hidden" onclick="signOut()">Sign Out</button>
        </div>
        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark content-ui hidden" id="tab-bar">
          <a href="#home" class="mdl-layout__tab is-active">Home</a>
          <a href="#premium" class="mdl-layout__tab">Premium</a>
          <a href="#settings" class="mdl-layout__tab">Settings</a>
        </div>
      </header>

      <!-- Page content -->

      <main class="mdl-layout__content">
        <!-- Login UI -->
        <div class="login-ui hidden" id="firebaseui-auth-container"></div>

        <!-- Content UI -->
        <div class="content-ui hidden" id="tab-content">
          <div class="mdl-layout__tab-panel is-active" id="home">
            <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
              <div class="mdl-card mdl-cell mdl-cell--12-col">
                <div class="mdl-card__supporting-text">
                  <h6>Basic content</h6>
                  <div id="spinner-basic-content" class="mdl-spinner mdl-js-spinner is-active"></div>

                  <div id="basic-content">
                    <img class="content" src="" /><br/><br/>
                    Welcome to your very basic classic taxi, driving through the peaceful cool of the night.<br/>
                    (This is a demo on how to subscribe on Android and access content on web)
                  </div>

                  <div id="subscribe-requirement">
                    Please subscribe to either Basic or Premium plan via the Android app to get your classy taxi.
                  </div>
                </div>
              </div>
            </section>
          </div>

          <div class="mdl-layout__tab-panel" id="premium">
            <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
              <div class="mdl-card mdl-cell mdl-cell--12-col">
                <div class="mdl-card__supporting-text">
                  <h6>Premium content</h6>
                  <div id="spinner-premium-content" class="mdl-spinner mdl-js-spinner is-active"></div>

                  <div id="premium-content">
                    <img class="content" src="" /><br/><br/>
                    Welcome to the premium space taxi, flying through the endless possibilities of space.<br/>
                    (This is a demo on how to subscribe on Android and access content on web)
                  </div>

                  <div id="subscribe-premium-requirement">
                    Please subscribe to Premium plan via the Android app to get your premium space taxi.
                  </div>
                </div>
              </div>
            </section>
          </div>

          <div class="mdl-layout__tab-panel" id="settings">
            <section class="section--center mdl-grid mdl-grid--no-spacing mdl-shadow--2dp">
              <div class="mdl-card mdl-cell mdl-cell--12-col">
                <div class="mdl-card__supporting-text">
                    <h6>MANAGE YOUR SUBSCRIPTION on Google Play</h6>
                </div>
                <div class="mdl-card__actions">
                  <a href="https://play.google.com/store/account/subscriptions" class="mdl-button">GOOGLE PLAY SUBSCRIPTIONS</a>
                </div>
              </div>
            </section>
          </div>

        </div>
      </main>
    </div>
  </body>
</html>
